<script setup lang="ts">
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { useModalBinder } from '@/hooks/arco/useModalBinder';
  import { useForm } from '@/hooks/arco/useForm';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { queryInstStationOptions } from '@/api/structure-management/station';
  import { queryStaffs } from '@/api/structure-management/employee';
  import { assignDeviceAlarmOrder } from '@/api/workorder-management/alarm';

  const baseNameMap = {
    orderId: { key: 'orderId' },
    orderSite: {
      key: 'assignStationId',
      label: '接单站点',
      placeholder: '请选择接单站点',
    },
    orderStaff: {
      key: 'assignStaffId',
      label: '接单人员',
      placeholder: '请选择接单人员',
    },
  };

  const loading = ref(false);

  const stationOptions = useSelectOption({
    apiFun: queryInstStationOptions,
    fieldNames: {
      label: 'name',
      value: 'id',
    },
  });
  const staffOptions = useSelectOption({
    apiFun: queryStaffs,
    initQueryParams: [{ page: 1, pageSize: 10000 }],
    fieldNames: {
      label: 'staffName',
      value: 'staffId',
    },
  });

  const orderId = ref('');

  const editModal = useModalBinder((data) => {
    console.log('接收到的数据', data);
    orderId.value = data.orderNo;
  });

  const dataForm = useForm({
    state: {
      [baseNameMap.orderSite.key]: '',
      [baseNameMap.orderStaff.key]: '',
    },
    rules: {
      [baseNameMap.orderSite.key]: {
        required: true,
        message: baseNameMap.orderSite.placeholder,
      },
      [baseNameMap.orderStaff.key]: {
        required: true,
        message: baseNameMap.orderStaff.placeholder,
      },
    },
  });

  const handleOk = async () => {
    await dataForm.validate();
    console.log('dataForm.state', dataForm.state);
    loading.value = true;
    editModal.triggerLoading(true);
    const data = {
      [baseNameMap.orderId.key]: orderId.value,
      [baseNameMap.orderSite.key]: dataForm.state[baseNameMap.orderSite.key],
      [baseNameMap.orderStaff.key]: dataForm.state[baseNameMap.orderStaff.key],
    };
    // editModal.triggerLoading
    assignDeviceAlarmOrder(data)
      .then((res) => {
        Message.success(res);
        editModal.triggerSuccess(data);
        editModal.hideModal();
      })
      .catch((err) => {
        Message.error(err);
      })
      .finally(() => {
        loading.value = false;
      });
  };

  const handleCancel = () => {
    // console.log(';');
    editModal.hideModal();
  };

  defineExpose(editModal.expose);
</script>

<template>
  <div>
    <a-modal
      v-bind="editModal.bindProps"
      top="20%"
      :align-center="false"
      width="450px"
    >
      <template #title>
        <span>派发工单</span>
      </template>
      <div>
        <a-form v-bind="dataForm.bindProps" layout="vertical" :footer="true">
          <a-form-item
            :field="baseNameMap.orderSite.key"
            :label="baseNameMap.orderSite.label"
            required
          >
            <a-select
              v-bind="stationOptions.bindProps"
              v-model="dataForm.state[baseNameMap.orderSite.key]"
              :placeholder="baseNameMap.orderSite.placeholder"
            />
          </a-form-item>
          <a-form-item
            :field="baseNameMap.orderStaff.key"
            :label="baseNameMap.orderStaff.label"
            required
          >
            <a-select
              v-bind="staffOptions.bindProps"
              v-model="dataForm.state[baseNameMap.orderStaff.key]"
              :placeholder="baseNameMap.orderStaff.placeholder"
            />
          </a-form-item>
        </a-form>
      </div>
      <a-space :fill="true" align="end" style="justify-content: flex-end">
        <a-button :disabled="loading" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="loading" @click="handleOk"
          >确定</a-button
        >
      </a-space>
    </a-modal>
  </div>
</template>
